<script setup>
import ConstructionOne from './ConstructionOne.vue'

</script>

<template>
  <div class="ci-bg">
    <div class="ci-score">640</div>
    <div class="ci-name">施工单位A 评分</div>
    <div class="ci-list">
      <construction-one title="达标考评<br/>达标率" score="45%"></construction-one>
      <construction-one title="绩效考评<br/>百分制" :score="75.3"></construction-one>
      <construction-one title="日常打分<br/>扣分" :score="23"></construction-one>
      <construction-one title="自动采集问题<br/>数量" :score="65"></construction-one>
      <construction-one title="工程暂停令<br/>数量" :score="35"></construction-one>
      <construction-one title="安全质量问题<br/>数量" :score="42"></construction-one>
    </div>
    <construction-one class="ci-middle" title="不良行为<br/>扣分" :score="16"></construction-one>
  </div>
</template>



<style scoped>
.ci-bg {
  margin: 26px 38px 0 38px;
  background: url("../assets/bg-unit-item.png") no-repeat;
  background-size: 100% 100%;
  height: 327px;
  position: relative;
}
.ci-score {
  width: 158px;
  height: 56px;
  font-size: 46px;
  font-family: DIN-Medium, DIN sans-serif;
  font-weight: 500;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 28px;
  top: 107px;
  text-align: center;
}
.ci-name {
  width: 66px;
  font-size: 14px;
  line-height: 20px;
  font-family: PingFang SC-Regular, PingFang SC sans-serif;
  font-weight: 500;
  color: #fff;
  -webkit-background-clip: text;
  position: absolute;
  left: 73px;
  top: 168px;
  text-align: center;
}
.ci-list {
  position: absolute;
  left: 306px;
  top: 21px;
  display: flex;
  flex-wrap: wrap;
  width: 1480px;
}
.ci-middle {
  position: absolute;
  top: 104px;
  left: 1471px;
  margin: 0 !important;
}
</style>